<template>
  <div>
    <ul>
      <!-- 
        路由跳转，有两种方式：
          1. router-link
      -->
      <li>
        <!-- <router-link to="/course/frontend?name=jack&age=18">前端</router-link> -->
        <router-link
          :to="{ name: 'Frontend', query: { name: 'jack', age: 18 } }"
        >
          前端
        </router-link>
      </li>
      <li><router-link to="/course/backend/111">后端</router-link></li>
      <!-- 
          2. 编程式导航
            router.push/replace/go/back/forward()
      -->
      <li><button @click="$router.push('/course/frontend')">前端</button></li>
      <li>
        <button @click="$router.push('/course/backend/111')">后端</button>
      </li>

      <li><button @click="push('/course/frontend')">前端</button></li>
      <li><button @click="push('/course/backend/111')">后端</button></li>
    </ul>
    <router-view />
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";

defineOptions({
  name: "Course",
});

// 通过 useRouter 函数获取 router 对象
const router = useRouter();

const push = (path: string) => {
  router.push(path);
};
</script>

<style scoped lang="scss"></style>
